<template>
  <div >
    <div v-if="uploadQueue.length > 0" class="pd-l">
      <div :id="'item-' + i" v-for="(n, i) in uploadQueue" :key="i" class='ripple item' :class="{'flash': n.status == 'animation' }" v-show="n.status != 'deleted'">
        <div class="weui-flex pdv v-mdl">
          <div class="weui-flex__item" style="position: relative;">
            <div v-if="n.type == 'audio'" class="audio-editor">
              <span class="fw">{{n.idx}}</span>
              <block-audio-editor :block="n" @upload-success="onUploadSuccess(arguments, 'audio', i)"></block-audio-editor>
            </div>
            <div v-if="n.type == 'pic'">
              <block-image-editor :block="n" @upload-success="onUploadSuccess(arguments, 'image', i)"></block-image-editor>
            </div>
            <div v-if="n.type == 'video'">
              <block-video-editor :block="n" @upload-success="onUploadSuccess(arguments, 'video', i)"></block-video-editor>
            </div>
            <div class="handle-close" v-if="n.type != 'audio'" style="position: absolute;top: -12px;right: -6px;z-index: 10;">
              <a @tap.stop="delUploadQueueItem(i)"><i class="if icon-close c-gray"></i></a>
            </div>
          </div>
          <div style="" v-if="n.type == 'audio'">
            <div class="handle-close" style="position: relative;left: 5px;">
              <a @tap.stop="delUploadQueueItem(i)"><i class="if icon-close c-gray"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ta-r pdh-l pdv-s">
      <block-pickers :fastReplyPicker="fastReplyPicker" @pick="onBlockPick"></block-pickers>
    </div>
  </div>
</template>

<script>
import AudioPlayer from '@/components/audio-player'
import BlockImageEditor from '@/components/block-image-editor'
import BlockAudioEditor from '@/components/block-audio-editor'
import BlockVideoEditor from '@/components/block-video-editor'
import BlockPickers from '@/components/block-pickers'
import VideoPlayer from '@/components/video-player'
import { mapGetters, mapActions } from 'vuex'
import * as _app from '@/utils/app'
export default {
  props: {
    fastReplyPicker: {
      type: Boolean,
      default: true
    },
    value: {
      type: Array,
      default: []
    },
    defaultValue: {
      type: Array,
      default: []
    }
  },
  components: {
    AudioPlayer,
    BlockImageEditor,
    BlockPickers,
    BlockAudioEditor,
    BlockVideoEditor,
    VideoPlayer
  },
  data () {
    return {
      uploadQueue: this.defaultValue,
      blocks: [],
    }
  },
  computed: {
    ...mapGetters([
      'triggerClearUploadQueue',
    ]),
  },
  mounted () {
    let nv = this.defaultValue
    this.uploadQueue = _app.getUploadQueueFromBlocks(nv)
    this.blocks = nv
  },
  watch: {
    defaultValue (nv) {
      this.uploadQueue = _app.getUploadQueueFromBlocks(nv)
      this.blocks = nv
    },
    uploadQueue (nv) {
      let uploadingCount = 0
      nv.forEach(n => {
        if (n.status === 'uploading') {
          uploadingCount++
        }
      })
      this.setUploadingMediaNum(uploadingCount)

      if (nv.length === 0) {
        this.blocks = []
      }
    },
    value (nv) {
      this.uploadQueue = nv
    },
    blocks (nv) {
      let items = nv.filter(function (n) {
        return n.status !== 'deleted'
      }).map(function (n) {
        let {id, key, meta, size, type} = n
        return {id, key, meta, size, type}
      })
      let n = this.uploadQueue.filter(function (n) {
        return n.status === 'temp'
      }).length
      this.$emit('change', items, n)
    },
    triggerClearUploadQueue (nv) {
      this.uploadQueue = []
      this.blocks = []
    }
  },
  methods: {
    ...mapActions([
      'setDestroyMedia',
      'setUploadingMediaNum'
    ]),
    onUploadSuccess (args, type, idx) {
      let material = args[0]
      material.status = 'enable'
      let t = this.uploadQueue[idx]
      t.status = 'enable'
      this.$set(this.uploadQueue, idx, t)
      this.blocks.push(material)
    },
    delUploadQueueItem (idx, force) {
      if (!force) {
        let self = this
        this.uploadQueue[idx].status = 'animation'
        setTimeout(self.delUploadQueueItem.bind(self, idx, true), 1000)
        return
      }

      let t = []
      let delItem = null
      this.uploadQueue.forEach((n, i) => {
        if (i === idx) {
          n.status = 'deleted'
          delItem = n
        }
        t.push(n)
      })
      this.uploadQueue = t
      if (delItem.type === 'audio') {
        this.setDestroyMedia(delItem.path)
      }
      this.delBlockItem(idx)
    },
    delBlockItem (idx) {
      let t = []
      this.blocks.forEach((n, i) => {
        if (i === idx) n.status = 'deleted'
        t.push(n)
      })
      this.blocks = t
    },
    onBlockPick (item, type) {
      if (type === 'fast-reply') {
        this.$emit('fast-reply-pick', item)
        return
      }
      if (item.type === 'audio') {
        let idx = this.genAudioIdx()
        item.idx = idx + 1
      }
      item.status = 'temp'
      this.uploadQueue.push(item)
    },
    genAudioIdx () {
      let idx = 0
      this.uploadQueue.forEach(n => {
        if (n.type === 'audio') {
          idx++
        }
      })
      return idx
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
.handle-close {
  width: 28px;
  height: 28px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  text-align: center;
  line-height: 24px;
  overflow: hidden;
  border: 1px solid #eee;
  i {
    font-size: 12px;
  }
}
.audio-editor {
  position: relative;
  span {
    position: absolute;
    top: -8px;
    left: -5px;
    color: @colorTeal;
    font-size: @size-6;
  }
}
</style>
